<!DOCTYPE html>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright © 2013-2016 The Nxt Core Developers.                            ~
  ~ Copyright © 2016-2017 Jelurida IP B.V.                                    ~
  ~                                                                           ~
  ~ See the LICENSE.txt file at the top-level directory of this distribution  ~
  ~ for licensing information.                                                ~
  ~                                                                           ~
  ~ Unless otherwise agreed in a custom licensing agreement with Jelurida B.V.,
  ~ no part of the Nxt software, including this file, may be copied, modified,~
  ~ propagated, or distributed except according to the terms contained in the ~
  ~ LICENSE.txt file.                                                         ~
  ~                                                                           ~
  ~ Removal or modification of this copyright notice is prohibited.           ~
  ~                                                                           ~
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            body {background-color: #E0E0E0; color: #000; font-family: Tahoma; font-size: 10pt; margin: 0; padding: 10px;}
            table {border-collapse: collapse; width: 100%;}
            td {background-color: #C0C0C0; height: 20px; line-height: 20px; padding: 0;}
            .amount {background-image: url(); width: 20px;}
            .block {background-image: url(); width: 20px;}
            .c {height: 10px;}
            .e {border-right: 1px solid #808080; height: 10px; width: 10px;}
            .gap {background-color: transparent; height: 10px;}
            .generator {background-image: url(); width: 20px;}
            .height {background-image: url(); width: 20px;}
            .n {border-top: 1px solid #808080; height: 10px;}
            .ne {border-top: 1px solid #808080; border-right: 1px solid #808080; height: 10px; width: 10px;}
            .nw {border-top: 1px solid #808080; border-left: 1px solid #808080; height: 10px; width: 10px;}
            .payloadLength {background-image: url(); width: 20px;}
            .s {border-bottom: 1px solid #808080; height: 10px;}
            .se {border-bottom: 1px solid #808080; border-right: 1px solid #808080; height: 10px; width: 10px;}
            .sw {border-bottom: 1px solid #808080; border-left: 1px solid #808080; height: 10px; width: 10px;}
            .target {background-image: url(); width: 20px;}
            .text {cursor: default; padding: 0 10px 0 5px; white-space: nowrap;}
            .timestamp {background-image: url(); width: 20px;}
            .numberOfTransactions {background-image: url(); width: 20px;}
            .version {background-image: url(); width: 20px;}
            .w {border-left: 1px solid #808080; height: 10px; width: 10px;}
        </style>
        <script type="text/javascript">
            var deadline = 0;

            function addBlock(block, insert) {
                var blocks = document.getElementById("blocks"), row = blocks.insertRow(insert ? 1 : blocks.rows.length), element;
                row.id = "block" + block.index + "_0";
                element = row.insertCell(0);
                element.className = "gap";
                element.colSpan = 8;
                row = blocks.insertRow(insert ? 2 : blocks.rows.length);
                row.id = "block" + block.index + "_1";
                element = row.insertCell(0);
                element.className = "nw";
                element = row.insertCell(1);
                element.className = "n";
                element.colSpan = 6;
                element = row.insertCell(2);
                element.className = "ne";
                row = blocks.insertRow(insert ? 3 : blocks.rows.length);
                row.id = "block" + block.index + "_2";
                element = row.insertCell(0);
                element.className = "w";
                element = row.insertCell(1);
                element.className = "height";
                element.title = "Height";
                element = row.insertCell(2);
                element.className = "text";
                element.innerHTML = block.height;
                element = row.insertCell(3);
                element.className = "generator";
                element.title = "Generator";
                element = row.insertCell(4);
                element.className = "text";
                element.innerHTML = block.generator;
                element = row.insertCell(5);
                element.className = "timestamp";
                element.title = "Timestamp";
                element = row.insertCell(6);
                element.className = "text";
                element.innerHTML = formatTimestamp(block.timestamp);
                element = row.insertCell(7);
                element.className = "e";
                row = blocks.insertRow(insert ? 4 : blocks.rows.length);
                row.id = "block" + block.index + "_3";
                element = row.insertCell(0);
                element.className = "w";
                element = row.insertCell(1);
                element.className = "c";
                element.colSpan = 6;
                element = row.insertCell(2);
                element.className = "e";
                row = blocks.insertRow(insert ? 5 : blocks.rows.length);
                row.id = "block" + block.index + "_4";
                element = row.insertCell(0);
                element.className = "w";
                element = row.insertCell(1);
                element.className = "numberOfTransactions";
                element.title = "Number of transactions";
                element = row.insertCell(2);
                element.className = "text";
                element.innerHTML = block.numberOfTransactions;
                element = row.insertCell(3);
                element.className = "amount";
                element.title = "Total amount and fee";
                element = row.insertCell(4);
                element.className = "text";
                element.innerHTML = formatAmount(block.totalAmountNQT) + " + " + formatAmount(block.totalFeeNQT);
                element = row.insertCell(5);
                element.className = "payloadLength";
                element.title = "Payload length";
                element = row.insertCell(6);
                element.className = "text";
                element.innerHTML = formatVolume(block.payloadLength);
                element = row.insertCell(7);
                element.className = "e";
                row = blocks.insertRow(insert ? 6 : blocks.rows.length);
                row.id = "block" + block.index + "_5";
                element = row.insertCell(0);
                element.className = "w";
                element = row.insertCell(1);
                element.className = "c";
                element.colSpan = 6;
                element = row.insertCell(2);
                element.className = "e";
                row = blocks.insertRow(insert ? 7 : blocks.rows.length);
                row.id = "block" + block.index + "_6";
                element = row.insertCell(0);
                element.className = "w";
                element = row.insertCell(1);
                element.className = "version";
                element.title = "Version";
                element = row.insertCell(2);
                element.className = "text";
                element.innerHTML = block.version;
                element = row.insertCell(3);
                element.className = "block";
                element.title = "Block";
                element = row.insertCell(4);
                element.className = "text";
                element.innerHTML = block.block;
                element = row.insertCell(5);
                element.className = "target";
                element.title = "Base target";
                element = row.insertCell(6);
                element.className = "text";
                element.innerHTML = (block.baseTarget >= 100000 ? Math.round(block.baseTarget / 1000) : (block.baseTarget >= 10000 ? Math.round(block.baseTarget / 100) / 10 : (block.baseTarget >= 1000 ? Math.round(block.baseTarget / 10) / 100 : block.baseTarget / 1000))) + " %";
                element = row.insertCell(7);
                element.className = "e";
                row = blocks.insertRow(insert ? 8 : blocks.rows.length);
                row.id = "block" + block.index + "_7";
                element = row.insertCell(0);
                element.className = "sw";
                element = row.insertCell(1);
                element.className = "s";
                element.colSpan = 6;
                element = row.insertCell(2);
                element.className = "se";
                if (blocks.rows.length <= 61 * 8) {
                    element = parent.document.getElementById("recentBlocksCounter");
                    element.innerHTML = parseInt(element.innerHTML) + 1;
                } else {
                    for (i = 0; i < 8; i++) {
                        blocks.deleteRow(insert ? blocks.rows.length - 1 : 0);
                    }
                }
            }

            function addBlocks(blocks, insert) {
                var i;
                for (i = 0; i < blocks.length; i++) {
                    addBlock(blocks[i], insert);
                }
            }

            function formatAmount(amount) {
                var digits=[], formattedAmount = "", i;
                var wholePart = Math.floor(amount / 100000000);
                var fractionalPart = amount % 100000000;
                do {
                    digits[digits.length] = wholePart % 10;
                    wholePart = Math.floor(wholePart / 10);
                } while (wholePart > 0);
                for (i = 0; i < digits.length; i++) {
                    if (i > 0 && i % 3 == 0) {
                        formattedAmount = "'" + formattedAmount;
                    }
                    formattedAmount = digits[i] + formattedAmount;
                }
                if (fractionalPart != 0) {
                    formattedAmount += ".";
                    for (i = ("" + fractionalPart).length; i < 8; i++) {
                        formattedAmount += "0";
                    }
                    formattedAmount += fractionalPart;
                }
                return formattedAmount;
            }

            function formatDeadline(deadline) {
                if (deadline <= 3) {
                    return "a few seconds";
                }
                var d, h, m, s;
                s = deadline % 60;
                m = ((deadline - s) / 60) % 60;
                h = ((deadline - s - m * 60) / 3600) % 24;
                d = (deadline - s - m * 60 - h * 3600) / 86400;
                s = s > 0 ? (s + " second" + (s > 1 ? "s" : "")) : "";
                m = m > 0 ? (m + " minute" + (m > 1 ? "s" : "")) : "";
                h = h > 0 ? (h + " hour" + (h > 1 ? "s" : "")) : "";
                d = d > 0 ? (d + " day" + (d > 1 ? "s" : "")) : "";
                deadline = d + " " + h + " " + m + " " + s;
                while (deadline.indexOf("  ") >= 0) {
                    deadline = deadline.replace("  ", " ");
                }
                while (deadline.charAt(0) == " ") {
                    deadline = deadline.substr(1);
                }
                while (deadline.charAt(deadline.length - 1) == " ") {
                    deadline = deadline.substr(0, deadline.length - 1);
                }
                return deadline;
            }

            function formatTimestamp(timestamp) {
                return (new Date(Date.UTC(2013, 10, 24, 12, 0, 0, 0) + timestamp * 1000)).toLocaleString();
            }

            function formatVolume(volume) {
                var digits=[], formattedVolume = "", i;
                do {
                    digits[digits.length] = volume % 10;
                    volume = Math.floor(volume / 10);
                } while (volume > 0);
                for (i = 0; i < digits.length; i++) {
                    if (i > 0 && i % 3 == 0) {
                        formattedVolume = "'" + formattedVolume;
                    }
                    formattedVolume = digits[i] + formattedVolume;
                }
                return formattedVolume + " B";
            }

            function initialize() {
                setInterval(function() {
                    var i = deadline - (new Date()).getTime();
                    document.getElementById("generationTime").innerHTML = i > 0 ? ("You can generate the next block in <b>" + formatDeadline(Math.round(i / 1000))) : "</b>";
                }, 1000);
            }

            function removeBlock(block) {
                var i, element;
                for (i = 0; i < 8; i++) {
                    element = document.getElementById("block" + block.index + "_" + i);
                    if (element != null) {
                        document.getElementById("blocks").deleteRow(element.rowIndex);
                    }
                }
                var element = parent.document.getElementById("recentBlocksCounter");
                element.innerHTML = parseInt(element.innerHTML) - 1;
            }

            function removeBlocks(blocks) {
                var i;
                for (i = 0; i < blocks.length; i++) {
                    removeBlock(blocks[i]);
                }
            }

            function setDeadline(deadline) {
                this.deadline = (new Date()).getTime() + deadline * 1000;
            }
        </script>
    </head>
    <body onload="initialize();">
        <table id="blocks">
            <tr>
                <td id="generationTime" class="text" colspan="8" style="background-color: transparent; padding: 0;"></td>
            </tr>
        </table>
    </body>
</html>